<template>
  

  <div class="bg-white mt-20px rounded-8px">
    <div class="px-20px py-30px">
        <div class="m-10px text-20px">今日学习计划</div>
        <div class="p-10px mb-20px text-16px text-gray-500 border border-1px border-gray-300 border-left-0 border-top-0 border-right-0 ">{{ todayDate }}</div>
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column prop="plan_date" label="时间" width="180" />
            <el-table-column prop="content" label="复习知识点内容" width="380" >
                <template #default="{ row }">
                    <div class="text-left" v-html="formatContent(row.content)"></div>
                </template>
            </el-table-column>

            <el-table-column prop="status" label="完成情况" />
            <el-table-column label="复习/答题">
                <template #default="{ row }">
                    <el-button size="small" @click="goBook(row)">
                    去复习
                    </el-button>
                    <el-button
                    size="small"
                    type="danger"
                    @click="goExam(row)"
                    >
                    去做题
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="text-center mt-30px"><el-pagination class="justify-center" @current-change="handleCurrentChange" :hide-on-single-page="true" background layout="prev, pager, next" :total="total" /></div>
    </div>
    
  </div>
</template>

<script setup>
    import { systemApi,userApi,httpApi } from '../../api/api'
    import { configStore } from '../../stores/config'
    import { diffTwoDates,getToday } from '../../utils/tool'
    import { ElMessage, ElMessageBox,ElLoading  } from 'element-plus'
    import { ref,onMounted,watch } from "vue"
    import { useRouter } from 'vue-router'
    const router = useRouter()
    const config = configStore()
    const lessonData = ref({})
    const todayDate = ref("")
    const currentPage = ref(1)
    const total=ref(0)
    

    const tableData = ref([])
    const formatContent = (text) => {
        return text.replace(/\n/g, '<br>');
        };
    const init = async()=>{
        todayDate.value = getToday()
        lessonData.value = config.getBook()
        let params = lessonData.value
        params.page = currentPage.value
        params.type = "today"
        let res = await httpApi.getDayTask(lessonData.value)
            if(res.code){
                total.value = res.data.total
                tableData.value = res.data.needChapter
                tableData.value.forEach(item=>{
                    item.status = item.status == 0?"未完成":"已完成"
                })
            }

        }  
    const goBook = (row)=>{
        console.log("数据",row.teaching_id)
        config.setCurrentOpen({teaching_id:row.teaching_id})
        router.push({path:"/book/book/1"})
    }

    const goExam = (row)=>{
        console.log("数据",row.teaching_id)
        config.setCurrentOpen({teaching_id:row.teaching_id})
        router.push({name:"PointExamDetail",query:{type:1,section_id:row.teaching_section_id}})
    }
        
    const handleCurrentChange = (value)=>{
        currentPage.value = value
        init()
        //console.log("当前第几页",value)
    }
    // 科目变化时加载
    watch(() => config.$state.currentBook.book_id, () => {
      init()
    })
    onMounted(()=>{
      init()
    })

</script>
<style scoped>
    ::v-deep .el-table .cell{
        text-align: center!important;
    }
</style>
